<template>
	<van-row>
		<van-col span="24">
			<van-row>
				<van-col span="2" offset="1">
					<van-icon name="arrow-left" size="30" @click="icon" class="icon" />
				</van-col>
				<van-col span="18">
					<van-search v-model="value" shape="round" placeholder="苹果电脑" />
				</van-col>
				<van-col span="3" class="search" @click="search">搜索</van-col>
			</van-row>
		</van-col>
		<van-col span="24">
			<p class="text">热搜</p>
		</van-col>
		<div>
			<div id="" v-if="show">
				<van-row style="width: 100%;height: 20vh;">
					<van-col span="24" style="width: 100%;height: 10vh;display: flex;flex-wrap: wrap;">
						<div
							style="width: 30%;height: 25px;border-radius: 15px;background-color: #f3f3f3;margin-left: 3%;text-align: center;font-size: 10px;line-height: 25px;">
							性价比iPhone SE</div>
						<div
							style="width: 25%;height: 25px;border-radius: 15px;background-color: #f3f3f3;margin-left: 3%;text-align: center;font-size: 10px;line-height: 25px;">
							平板电脑</div>
						<div
							style="width: 25%;height: 25px;border-radius: 15px;background-color: #f3f3f3;margin-left: 3%;text-align: center;font-size: 10px;line-height: 25px;">
							蓝牙耳机</div>
						<div
							style="width: 25%;height: 25px;border-radius: 15px;background-color: #f3f3f3;margin-left: 3%;text-align: center;font-size: 10px;line-height: 25px;">
							mac book</div>
						<div
							style="width: 25%;height: 25px;border-radius: 15px;background-color: #f3f3f3;margin-left: 3%;text-align: center;font-size: 10px;line-height: 25px;">
							12pro</div>
					</van-col>
				</van-row>
			</div>
			<div v-else style="width: 100%;display: flex;flex-wrap: wrap;">
				<div class="a" v-for="(item,index) in brief" :key="index">{{item}}</div>
			</div>
		</div>


		<searchList :searchList="searchList"></searchList>
	</van-row>
</template>

<script>
	import searchList from './searchList.vue'
	export default {
		components: {
			searchList
		},
		data() {
			return {
				value: '',
				searchList: [],
				brief: [],
				show: true
			}
		},
		methods: {
			icon() {
				this.$router.push('/')
			},
			search() {
				console.log(this.value);
				
				if (this.value !== '') {
					let val = this.value.trim() //输入的值去除字符串的头尾空格
					
					this.show = false
					if (!val) {
						// 判断输入框的值是否为空
						return
					}
					if (this.brief.indexOf(val) === -1) {
						this.brief.unshift(val) //最新的第一个历史记录
						this.brief = this.brief.slice(0, 10) //最多显示10个
						// 历史记录的搜索
						localStorage.setItem('history', JSON.stringify(this.brief))
					}
				}
				let name = this.value
				this.$nextTick(function() {
					this.$store.dispatch("user/vuexsearchName", name)
						.then(e => {
							console.log(e, 222222)
							this.searchList = e.data.data
						})
				})
			}
		},
		mounted() {
			if (JSON.parse(localStorage.getItem('history'))) {
				this.brief = JSON.parse(localStorage.getItem('history')) //读取储存的数据
			}
		}
	}
</script>

<style>
	.search {
		font-size: 1.25rem;
		margin-top: 15px;
	}

	.icon {
		margin-top: 15px;
	}

	.text {
		margin-top: 0.3125rem;
		font-size: 1.25rem;
		font-weight: 600;
		margin-left: 1.3rem;
		margin-bottom: 1.25rem;
	}

	.tag {
		width: 70px;
		height: 30px;
		color: #5E5E5E;
		text-align: center;
		line-height: 30px;
		border-radius: 5px;
		background-color: #F4F4F4;
		margin-left: 20px;
		margin-top: 20px;
	}

	.a {
		width: 20%;
		height: 2.5rem;
		line-height: 2.5rem;
		text-align: center;
		background-color: #B4B0AB;
		margin-left: 1.25rem;
		margin-top: 0.9375rem;
		border-radius: 0.3125rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
